<script>
    import {Transformer, builtInPlugins} from 'markmap-lib';
    import {Markmap, loadCSS, loadJS} from 'markmap-view';
    import {Client} from "@gradio/client";

    export let title


    let inputValue = "给我一个学习ai的思维导图";

    async function get_mind() {
        // With default plugins
        const client = await Client.connect("http://127.0.0.1:7860/");
        console.log(inputValue)
        const dataMark = await client.predict("/get_mind_chat", {
            message: inputValue,
        });
        const transformer = new Transformer();

        // 正则表达式（关键部分）
        const regex = /```markdown\n([\s\S]*?)\n```/;

        // 执行匹配
        let data = dataMark.data[0]
        const match = data.match(regex);
        if (match && match[1]) {
            console.log("提取成功！内容如下：");
            data = match[1]
        } else {
            console.error("未找到有效的 markdown 内容");
        }
        const {root, features} = transformer.transform(data);
        const svgEl = document.querySelector('#markmap');
        // 清除SVG元素的所有子节点
        while (svgEl.firstChild) {
            svgEl.removeChild(svgEl.firstChild);
        }
        Markmap.create(svgEl, undefined, root);
    }
</script>

<main>
    <h1>{title}</h1>
    <svg id="markmap" style="width: 800px; height: 800px"></svg>
    <input type="text" bind:value="{inputValue}">
    <button on:click="{get_mind}">生成思维导图</button>

</main>

<style>

</style>
